<template>
  <div class="common-layout">
    <div class="login">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="用户名" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="ruleForm.confirmPassword" type="password" />
        </el-form-item>
        
        <el-form-item style="margin-left: 150px;">
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            注册
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { ElForm } from 'element-plus';
import router from '@/router';
import axios from 'axios';

export default {
  components: {
    ElForm,
    // 其他需要的 Element Plus 组件
  },
  data() {
    return {
      formSize: 'default',
      ruleForm: reactive({
        name: '',
        password: '',
        confirmPassword: '',
      }),
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度要在3-10', trigger: 'blur' },
        ],    
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度要在6-20', trigger: 'blur' },
        ],    
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value !== this.ruleForm.password) {
              callback(new Error('两次输入密码不一致'));
            } else {
              callback();
            }
          }, trigger: 'blur' },
        ],    
      },
      ruleFormRef: null,
      userlist: []
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.ruleFormRef = this.$refs.ruleFormRef;
    });
    axios.get('users.json').then(res => {
      this.userlist = res.data.userslist;
    });
  },
  methods: {
    async submitForm() {
      if (!this.ruleFormRef) return;
      await this.ruleFormRef.validate((valid, fields) => {
        if (valid) {
          // 此处完成用户名和密码的匹配，如果匹配，则跳转到首页
          let flag = this.userlist.some((v) => v.name === this.ruleForm.name);
          if (flag) {
            alert('用户名已存在');
          } else {
            // 添加新用户逻辑
            axios.post('/register', this.ruleForm).then(() => {
              sessionStorage.setItem('username', this.ruleForm.name);
              router.push('/');
            }).catch((error) => {
              alert('注册失败');
              console.error(error);
            });
          }
          console.log('submit!');
        } else {
          console.log('error submit!', fields);
        }
      });
    },
    resetForm() {
      if (!this.ruleFormRef) return;
      this.ruleFormRef.resetFields();
    },
  },
};
</script>

<style scoped>
.common-layout {
  background: url(../../assets/注册背景.png)
    no-repeat center;
  height: 100%;
  width: 100%;
  background-size: cover;
  display: flex;
  position: absolute;
  left: 0;
  top: 0;
}
.login {
  width: 400px;
  height: 300px; /* 调整高度以适应新增的确认密码字段 */
  text-align: center;
  margin-top: 200px; /* 调整顶部边距 */
  margin-left: 200px; /* 调整左边距 */
}
</style>



